<template>
    <div>
      <CityHeader></CityHeader>
      <CitySearch :cities="cities"></CitySearch>
      <CityList :hotCities="hotCities" :cities="cities" :letter='letter'></CityList>
      <Alphabet :cities="cities" @change='changInfo'></Alphabet>
    </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/CityHeader'
import CitySearch from './components/CitySearch'
import CityList from './components/CityList'
import Alphabet from './components/Alphabet'
export default {
    name:'City',
    data(){
      return {
		    hotCities:[],
        cities:{},
        letter:''
      }
    },
    components:{
        CityHeader,
        CitySearch,
        CityList,
        Alphabet
    },
    methods: {
      getCityInfo(){
        axios.get('/api/city.json')
          .then(this.getCityInfoSucc)
      },
      getCityInfoSucc (res) {
        res = res.data
        if(res.ret&&res.data){
          const data = res.data
          this.hotCities=data.hotCities
          this.cities=data.cities
        }
      },
      changInfo (letter){
        this.letter=letter
        }
    },
    mounted () {
      this.getCityInfo()
    }
}
</script>

<style lang='stylus' scoped>
  
</style>

